<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }">
        <el-menu router :default-active="$route.path" background-color="#345" text-color="#bbb"
          :style="{ height: '100vh' }" :collapse="isCollapse" class="el-menu-vertical-demo">
          <el-menu-item>
            <img width="30px" src="../assets/logo.png" alt="">
            <template slot="title">
              <span style="font-size: 1.2em; color:#efefef; font-weight: bold;">&nbsp;&nbsp;物业后台管理</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title">
              <span slot="title">首页</span>
            </template>
          </el-menu-item>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span slot="title">用户管理</span>
            </template>
            <el-menu-item index="/home/user">
              <i class="el-icon-notebook-2"></i>
              <span slot="title">系统用户管理</span>
            </el-menu-item>
            <el-menu-item index="/home/owner">
              <i class="el-icon-document"></i>
              <span slot="title">业主管理</span>
            </el-menu-item>
          </el-submenu>
          <!-- ========== 2 ========== -->
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-office-building"></i>
              <span slot="title">房屋信息管理</span>
            </template>
            <el-menu-item index="/home/house-info">
              <i class="el-icon-chat-line-round"></i>
              <span slot="title">房屋信息查询</span>
            </el-menu-item>
            <el-menu-item index="/home/house-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增房屋</span>
            </el-menu-item>
          </el-submenu>
          <!-- ========== 3 ========== -->
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-check"></i>
              <span slot="title">设备信息管理</span>
            </template>
            <el-menu-item index="/home/device-info">
              <i class="el-icon-chat-line-round"></i>
              <span slot="title">设备查询</span>
            </el-menu-item>
            <el-menu-item index="/home/device-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增设备</span>
            </el-menu-item>
            <el-menu-item index="/home/device-repair">
              <i class="el-icon-chat-line-round"></i>
              <span slot="title">设备维修查询</span>
            </el-menu-item>
            <el-menu-item index="/home/device-repair-add">
              <i class="el-icon-plus"></i>
              <span slot="title">新增设备维修</span>
            </el-menu-item>
          </el-submenu>
          <!-- ========== 4 ========== -->
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-bank-card"></i>
              <span slot="title">收费管理</span>
            </template>
            <el-menu-item index="/home/charging-info">
              <i class="el-icon-chat-line-round"></i>
              <span slot="title">收费信息查询</span>
            </el-menu-item>
            <el-menu-item index="/home/charging-add">
              <i class="el-icon-plus"></i>
              <span slot="title">收费信息添加</span>
            </el-menu-item>
          </el-submenu>

          <el-menu-item index="/home/complaint">
            <i class="el-icon-phone"></i>
            <span slot="title">投诉管理</span>
          </el-menu-item>

          <el-menu-item index="/home/myset">
            <i class="el-icon-s-tools"></i>
            <span slot="title">管理员设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse = true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse = false"></i>
          <span>未登录</span>
        </el-header>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isCollapse: false
    }
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}
</style>
